<template>
  <ButtonGroup size="small">
    <Button @click="big"><img src="../assets/icons/big.png" width="14" height="14"/></Button>
    <Button @click="small"><img src="../assets/icons/small.png" width="14" height="14"/></Button>
    <Button @click="rSet">1:1</Button>
  </ButtonGroup>
</template>

<script>
import select from '@/mixins/select'

export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      zoom:0
    };
  },
  created() {
    this.canvas.c.on('mouse:wheel', opt => {
      const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
      let zoom = this.canvas.c.getZoom() // 获取画布当前缩放值
      zoom *= 0.999 ** delta
      if (zoom > 20) zoom = 20 // 限制最大缩放级别
      if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别

      // 以鼠标所在位置为原点缩放
      this.canvas.c.zoomToPoint(
          { // 关键点
            x: opt.e.offsetX,
            y: opt.e.offsetY
          },
          zoom // 传入修改后的缩放级别
      )
    })
  },
  computed: {
    unShow() {
      return (this.mSelectMode === 'one' && this.mSelectOneType === 'group')
    },
    createShow(){
      return (this.mSelectMode === 'multiple')
    },
  },
  methods:{
    rSet(){
      this.canvas.c.setZoom(1);
      this.canvas.c.absolutePan({x:0,y:0})
      this.zoom = `${Math.round(100)}%`
    },
    big(){
      let zoomRatio = this.canvas.c.getZoom();
      zoomRatio += 0.05;
      this.canvas.c.zoomToPoint(
        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2),
			  zoomRatio,
      )
      this.zoom = `${Math.round(zoomRatio * 100)}%`
    },
    small(){
      let zoomRatio = this.canvas.c.getZoom();
      zoomRatio -= 0.05;
      this.canvas.c.zoomToPoint(
        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2),
			  zoomRatio,
      )
      this.zoom = `${Math.round(zoomRatio * 100)}%`
    }
  }
};
</script>
<style scoped lang="less">
</style>
